import { useEffect, useState } from "react"
function News() {
    // 存放新闻数据
    const [list, setList] = useState([]);
    // 页数,默认 第一页
    const [page, setPage] = useState(1);
    // 是否继续更新数据的 开关
    const [flag, setFlag] = useState(true);

    // 获取数据的 方法
    function getNews() {
        fetch("http://dida100.com/mi/list.php?channel_id=hot&page=" + page)
            // 数据转出json格式 
            .then(res => res.json())
            .then(res => {
                // 把获取到的数据更新到list
                setList(list.concat(res.result));
                // 数据已经更新，开关打开
                setFlag(true)
                console.log(res.result)
            })
    }

    // 滾动条触底+更新页数
    function check() {
        // 获取list里的最后一条新闻数据
        var last = document.querySelector(".item:last-child");
        // 获取最后一条数据距离浏览器顶部的距离
        var top = last.getBoundingClientRect().top;
        // 获取浏览器高度
        var height = window.innerHeight;
        /*
        判断--最后一条数据距离浏览器顶部的距离 小于 浏览器高度
            最后一条数据快显示到浏览器窗口时：更新下一页数据
            开关为true时，页数+1,更新数据
        */
        if (top < height && flag) {
            setPage(page + 1)
            /*
            开关为false
                避免页数连续+1
            */
            setFlag(false)
        }
    }
    /*
        监听开关的变化
    */
    useEffect(() => {
        /*
        添加监听滚动条事件
            滚动条一动就执行 check
        */
        window.addEventListener("scroll", check);
        return () => {
            // 返回时删除监听
            window.removeEventListener("scroll", check);
        }
    }, [flag])

    // 监听 页数变化，变化就更新数据
    useEffect(() => {
        getNews()
    }, [page])
    return (<div>
        <ul>
            {
                // map 渲染数据 （箭头函数 没有{ }）
                list.map((item, index) =>
                    <li key={index} className="item">
                        <h4>{item.title}</h4>
                        <p>{item.summary}</p>
                        <hr />
                    </li>
                )
            }
        </ul>
    </div>);
}

export default News;

/*
 准备工作
    1，盛放列表数据的 list
    2，新闻列表页数  page
    3，数据更新的开关 flag
    获取数据的方法  getNews()
    触底加载的方法  check()
    判断是否更新下一页的方法 useEffect()
    监听：
        page：页数变化就获取新的数据，flag开关打开，并渲染
        flag：开关为true,可以执行更新页数的方法，最后在设置flag为 false
*/